<template>
  <el-container class="shite">
    <el-aside class="left" width="180px">
      <el-menu
        :default-active="defaultActive"
        @select="change"
        class="left-menu"
        active-text-color="#2B2B2B"
      >
        <el-submenu index="admin" popper-class="dddf" style="text-align:left;" v-if="userStatus==0||userStatus==3||userStatus==5||userStatus==4">
          <template slot="title">
            <span><img src="static/secondary-user.png">&nbsp;用户</span>
          </template>
          <el-menu-item index="AdminInfo">用户信息</el-menu-item>
          <el-menu-item index="AddAdmin">添加用户</el-menu-item>
          <!--<el-menu-item index="addAdministrator">添加管理员</el-menu-item>-->
        </el-submenu>
        <el-submenu index="administrator" popper-class="dddf" style="text-align:left;" v-if="userStatus==0||userStatus==3||userStatus==5||userStatus==4"> 
          <template slot="title">
            <span><img src="static/administrator.png">&nbsp;管理员</span>
          </template>
          <el-menu-item index="administratorInfo">管理员信息</el-menu-item>
         <el-menu-item index="addAdministrator" v-if="userStatus==0||userStatus==3">添加管理员</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container class="right">
      <component :is="currentView"></component>
    </el-container>
  </el-container>
</template>

<script>
import AdminInfo from "./components/adminInfo"
import AddAdmin from "./components/addAdmin"
import addAdministrator from "./components/addAdministrator"
import administratorInfo from "./components/administratorInfo"

export default {
  name: "auth",
  components: {
    AdminInfo,
    AddAdmin,
    addAdministrator,
    administratorInfo
  },
  data() {
    return {
      currentView: "AdminInfo",
      fullHeight: document.documentElement.clientHeight - 95,
      userStatus:'',
      defaultActive:'',
    };
  },
  created() {
    console.log(document.documentElement.clientHeight);
    this.userStatus = localStorage.getItem('userSatus')
    console.log('当前用户身份',this.userStatus)
    if(this.userStatus==4){
        this.currentView = 'administratorInfo'
        this.defaultActive = 'administratorInfo'
      }
      if(this.userStatus==0||this.userStatus==3||this.userStatus==5){
        this.currentView = 'AdminInfo'
        this.defaultActive = 'AdminInfo'
      }
  },
  methods: {
    change(name) {
      console.log(name);
      this.currentView = name;
    }
  }
};
</script>

<style scoped lang="less">
.shite {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  background-color: #fff;
  .left {
    width: 180px;
    height: 100%;
    background-color: #f2f7fb;
    overflow-x: hidden;
    .left-menu {
      text-align: center;
      background-color: #f2f7fb;
      .el-menu-item {
        font-size: 16px;
      }
      span {
        font-size: 16px;
      }
      .el-submenu{
          li{
              font-size: 14px;
              color: #747474 !important;
          }
      }
    }
  }
  /* ::-webkit-scrollbar {
    display: none;
  } */
  .right {
    flex: 1;
    padding: 20px;
    padding-right: 70px;
  }
}
</style>

<style lang="less">
.left {
  .el-menu {
    background-color: #f2f7fb;
  }

  .el-menu-item {
    color: #2b2b2b !important;
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title:hover{
    color: #303133;
  }
  .el-menu-item.is-active {
    background-color: #E6E6E6;
  }
  .el-submenu.is-active {
    .el-menu-item.is-active {
      background-color: #E6E6E6;
    }
  }
  .el-submenu.is-active .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
}
</style>
